<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>HOME</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />

		<style type="text/css">
			body {
				background-color: #fff;
			}
			.swiper-container {
				width: 100%;
				height: auto;
			}
			.swiper-wrapper {
				min-height: 505px;
				height: auto;
			}
			.swiper-slide {
				/*position: 0px;*/
				
				top: 0px;
				font-size: 18px;
				background: #fff;
			}
			.item .count {
				font-size: 14px;
			}
			.hastest {
				font-size: 16px;
			}
			.mui-table-view-cell.mui-active {
				background-color: #fff;
			}
			.title {
				padding: 20px 0px;
				color: #1e1d25;
			}
			.mui-btn-primary {
				background-color: #4fd2c2;
				border-color: #4fd2c2;
			}
			.selectitems h5 {
				text-align: left;
				width: 100%;
			}
			.selectitems h4 {
				line-height: 30px;
				/*height: 30px;*/
				
				font-weight: 200;
				width: 100%;
				float: left;
			}
			.selectitem {
				display: inline-block;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				/*border: 1px solid #32A4ED;*/
				
				float: left;
				color: #32a4ed;
				font-weight: bold;
			}
			.selectitem~.selected {
				border-radius: 15px;
				border: 1px solid #3E9FEC;
			}
			.selected {
				border-radius: 15px;
				border: 1px solid #3E9FEC;
			}
			.answeritem {
				margin-left: 15px;
				color: #959597;
				display: inline-block;
				line-height: 30px;
				/*height: 30px;*/
				
				width: 85%;
				font-size: 21px;
				float: left;
				margin-left: 10px;
			}
			.rightitem {
				display: inline-block;
				width: 30px;
				height: 30px;
				background-image: url(../image/right.png);
				background-size: cover;
				float: left;
			}
			.onrightitem {
				display: inline-block;
				width: 30px;
				height: 30px;
				background-image: url(../image/right-on.png);
				background-size: cover;
				float: left;
			}
			.wrongitem {
				display: inline-block;
				width: 30px;
				height: 30px;
				background-image: url(../image/wrong.png);
				background-size: cover;
				float: left;
			}
			.onwrongitem {
				display: inline-block;
				width: 30px;
				height: 30px;
				background-image: url(../image/wrong-on.png);
				background-size: cover;
				float: left;
			}
			.jiexi {
				padding: 10px 5px;
				background-color: #FFF;
				text-align: left;
			}
			.jiexi-title {
				height: 35px;
				padding: 5px 0px;
			}
			.jiexi-title img {
				height: 25px;
				float: left;
			}
			.jiexi p {
				line-height: 24px;
				color: #4fd2c0;
				font-size: 16px;
				margin-top: 5px;
			}
			.jiexiArea {
				visibility: hidden;
			}
		</style>

	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
			</div>
		</div>

	</body>
	<script type="text/html" id="qitem">
		<ul class="mui-table-view">
			<input type="hidden" class="qid" value="{{id}}" />
			<li class="mui-table-view-cell" style="background-color: #f8f8fa;">
				<span class="mui-pull-left">
					<button class="mui-btn mui-btn-primary">
						{{if type=="single_choice"}}单选{{/if}}
						{{if type=="uncertain_choice"}}多选{{/if}}
						{{if type=="determine"}}判断{{/if}}
					</button>
				</span>
				<span class="mui-pull-left" style="margin-left: 20px;line-height: 33px;">
					全部试题
				</span>
				<span class="mui-pull-right" style="margin-right: 30px;line-height: 33px;">{{pageParam("pageno")}}/{{pageParam("totalpage")}}</span>
			</li>
			<li class="mui-table-view-cell selectitems">
				<h5 style="font-size: 18px;line-height: 24px;">{{stem}}</h5> {{if type == "determine"}}
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer(1,{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 1}} onrightitem selected{{else}} rightitem{{/if}}{{/each}}{{else}} rightitem{{/if}}">	
								</span>
								<span class="answeritem">
									正确
								</span>						
				</h4>
				<div class="clearfix">

				</div>
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer(0,{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 0}} onwrongitem selected{{else}} wrongitem{{/if}}{{/each}}{{else}} wrongitem{{/if}}">	
								</span>
								<span class="answeritem">
									错误
								</span>						
				</h4> {{else}} {{each $parse(metas).choices as value i}}
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer({{i}},{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == i}} selected{{/if}}{{/each}}{{/if}}">
									{{if i==0}}A{{/if}}
									{{if i==1}}B{{/if}}
									{{if i==2}}C{{/if}}
									{{if i==3}}D{{/if}}
									{{if i==4}}E{{/if}}
									{{if i==5}}F{{/if}}
								</span>
								<span class="answeritem">
									{{value}}
								</span>						
					</h4> {{/each}} {{/if}}
			</li>
			<li class="mui-table-view-cell jiexiArea" style="padding: 15px 15px;">
				<div style="background-color: #f8f8fa;padding: 10px 10px;">
					<h4 class="jiexi-title"><img src="../image/xiangjie.png" style="height: 25px;"/></h4>
					<div class="jiexi">
						<p>
							答案:{{each $toArray(answer)}} {{if type == "determine"}}{{if $value==0}}错误{{/if}} {{if $value==1}}正确{{/if}}{{else}}{{if $value==0}}A{{/if}} {{if $value==1}}B{{/if}} {{if $value==2}}C{{/if}} {{if $value==3}}D{{/if}} {{if $value==4}}E{{/if}} {{if $value==5}}F{{/if}}
							&nbsp;{{/if}} {{/each}}
						</p>
						<p>
							{{analysis}}
						</p>

					</div>

				</div>

			</li>
		</ul>
	</script>
	<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/db.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		MYPAGE = {};
		MYPAGE.pageno = 0;

		function checkAnswer(myAns, answer, j) {
			var myAns = JSON.stringify(myAns);
			myAns = myAns.replace(/\[/, "");
			myAns = myAns.replace(/\]/, "");
			if (myAns == answer) {
				var result = 1;
			} else {
				var result = 0;
			}
			var myAnsStr = "[\"" + myAns + "\"]";
			var func = function(db) {
				var target = "course-1";
				var sql = 'UPDATE `question` SET `myans` = \'' + myAnsStr + '\',`result` = ' + result + ' WHERE `question`.`id` = ' + j;
				db.executeSql({
					name: 'data',
					sql: sql
				}, function(ret, err) {
					if (ret.status) {
						//												api.toast({
						//													msg:"更新成功！"
						//												});
					} else {
						api.toast({
							msg: err.msg
						});
					}
				});
			}
			APP.openDb(func);
		}

		function selectAnswer(k, j, answer, obj) {
			var ans = Array();
			var type = obj.getAttribute('data-type');
			var items = obj.parentNode.getElementsByClassName('selectitem');
			var citem = obj.getElementsByClassName("selectitem")[0];
			if (type == "uncertain_choice") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem":
						citem.className = "selectitem selected";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
					case "selectitem selected":
						citem.className = "selectitem";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
					default:
						citem.className = "selectitem";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
				}
			} else if (type == "single_choice") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem":
						for (var i = 0; i < items.length; i++) {
							items[i].className = "selectitem";
						}
						citem.className = "selectitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem selected":
						citem.className = "selectitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
					default:
						citem.className = "selectitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
				}
			} else if (type == "determine") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem rightitem":
						items[1].className = "selectitem wrongitem";
						citem.className = "selectitem onrightitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem wrongitem":
						items[0].className = "selectitem rightitem";
						citem.className = "selectitem onwrongitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem onrightitem selected":
						citem.className = "selectitem rightitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem onwrongitem selected":
						citem.className = "selectitem wrongitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
				}
			}
			//		.className="selectitem selected";
		};
		template.helper('$parse', function(data) {
			return JSON.parse(data.replace(/\\\\/g, "\\"));
		});
		template.helper('$toArray', function(data) {
			var data = JSON.parse(data);
			var toArray = new Array();
			toArray = data.toString().split(",");
			return toArray;
		});
		template.helper('pageParam', function(param) {
			switch (param) {
				case "totalpage":
					return MYPAGE.questionNum;
					break;
				case "pageno":
					return MYPAGE.pageno;
					break;
			}
		});

		function swiperNextIndex() {
			//自定义获取下一个slide函数 勿与原api搞混
			var nextindexEle = document.getElementsByClassName('swiper-slide-next')[0];
			if (typeof(nextindexEle) == "undefined") {
				nextindex = 2;
			} else {
				nextindex = parseInt(nextindexEle.getAttribute('data-swiper-slide-index')) + 1;
			}
			if (nextindex == 1) {
				nextindex = 11;
			}
			return nextindex;
			//使用时碰到11与10  应同时更新索引为1与0的slide的内容 处理倒回错误问题
//			if (nextindex == 11) {
//				swiper.slides[1].innerHTML = html;
//			}
//			if (nextindex == 10) {
//				swiper.slides[0].innerHTML = html;
//			}
		}

		function renderQuestion() {
			MYPAGE.qindex = 0; //题目的编号索引
			var action = 0;
			var swiper = new Swiper('.swiper-container', {
				loop: true,
				onSlideChangeStart: function(swiper) {
					swiper.unlockSwipeToNext();
					var cindex = swiper.activeIndex;
					var thisheight = swiper.slides[cindex].offsetHeight + 'px';
					if (thisheight != "0px") {
						swiper.container[0].style.height = thisheight;
					}
					var oldindex = swiper.previousIndex;
					var nextindexEle = document.getElementsByClassName('swiper-slide-next')[0];
					if (typeof(nextindexEle) == "undefined") {
						nextindex = 2;
					} else {
						nextindex = parseInt(nextindexEle.getAttribute('data-swiper-slide-index')) + 1;
					}
					if (nextindex == 1) {
						nextindex = 11;
					}
					if (cindex > oldindex) {
						MYPAGE.qindex++
					} else if (cindex < oldindex) {
						MYPAGE.qindex--
					}
					MYPAGE.pageno = MYPAGE.qindex + 1;
					if (MYPAGE.pageno < MYPAGE.questionNum || MYPAGE.pageno == MYPAGE.questionNum) {
						//数据库读取数据 异步操作
						var sql = MYPAGE.parentSql + ' limit ' + MYPAGE.qindex + ',' + 1;
						var func = function(db) {
							db.selectSql({
								name: 'data',
								sql: sql
							}, function(ret, err) {
								if (ret.status) {
									var html = template('qitem', ret.data[0]);
									swiper.slides[nextindex].innerHTML = html;
									if (nextindex == 11) {
										swiper.slides[1].innerHTML = html;
									}
									if (nextindex == 10) {
										swiper.slides[0].innerHTML = html;
									}
								} else {
									api.toast({
										msg: err.msg
									});
								}
							});
						}
						APP.openDb(func);
						if (MYPAGE.qindex == 1) {
							swiper.lockSwipeToPrev();
							MYPAGE.pageno = MYPAGE.qindex;
							//数据库读取数据 异步操作
							var sql = MYPAGE.parentSql + ' limit 0,2';
							var func = function(db) {
								db.selectSql({
									name: 'data',
									sql: sql
								}, function(ret, err) {
									if (ret.status) {
										var html = template('qitem', ret.data[0]);
										swiper.slides[cindex].innerHTML = html;
										MYPAGE.pageno = MYPAGE.qindex + 1;
										//页面号+1 同步试题页码
										var html2 = template('qitem', ret.data[1]);
										swiper.slides[cindex + 1].innerHTML = html2;
									} else {
										api.toast({
											msg: err.msg
										});
									}
								});
							}
							APP.openDb(func);
						} else {
							swiper.unlockSwipeToPrev();
						}
						window.scrollTo(0, 0);
						api.sendEvent({
							name: 'slideChange',
							extra: {
								pageno: MYPAGE.qindex,
								total: MYPAGE.questionNum
							}
						});
					} else {
						swiper.lockSwipeToNext();
						api.toast({
							msg: "没有题目了哦！"
						});
						api.confirm({
							title: '题目已答完',
							msg: '是否查看结果?',
							buttons: ['看看', '不要']
						}, function(ret, err) {
							if (ret.buttonIndex == 1) {
								api.sendEvent({
									name: 'testEnd'
								});
							}
						});
					}
				}
			});
			api.addEventListener({
				name: 'slideNext'
			}, function(ret, err) {
				swiper.slideNext();
			});
			api.addEventListener({
				name: 'slidePrev'
			}, function(ret, err) {
				swiper.slidePrev();
			});
			api.addEventListener({
				name: 'showAnswer'
			}, function(ret, err) {
				swiper.slides[swiper.activeIndex].getElementsByClassName('jiexiArea')[0].style.visibility = "visible";
			});
			api.addEventListener({
				name: 'Answer'
			}, function(ret, err) {
				swiper.slides[swiper.activeIndex].getElementsByClassName('jiexiArea')[0].style.visibility = "hidden";
			});
			api.addEventListener({
				name: 'favor'
			}, function(ret, err) {
				var qid = swiper.slides[swiper.activeIndex].getElementsByClassName('qid')[0].value;
				api.toast({
					msg: "已收藏" + qid
				});
			});
			api.addEventListener({
				name: 'toPageIndex'
			}, function(ret, err) {
				if (ret && ret.value) {
					MYPAGE.qindex = ret.value.pageno;
					var cindex = MYPAGE.qindex % 10;
					if (cindex == 0) {
						cindex = 10;
					}
					api.toast({
						msg: "qindex" + MYPAGE.qindex + ",cindex:" + cindex
					});
					swiper.slideTo(cindex, 500, false);
					//数据库读取数据 异步操作
					window.scrollTo(0, 0);
					api.sendEvent({
						name: 'slideChange',
						extra: {
							pageno: MYPAGE.qindex,
							total: MYPAGE.questionNum
						}
					});
					if (MYPAGE.qindex == 1) {
						var sql = MYPAGE.parentSql + ' limit 0,2';
						var func = function(db) {
							db.selectSql({
								name: 'data',
								sql: sql
							}, function(ret, err) {
								if (ret.status) {
//									alert(JSON.stringify(ret.data[0]));
									MYPAGE.pageno = MYPAGE.qindex;
									var html = template('qitem', ret.data[0]);
									swiper.slides[swiper.activeIndex].innerHTML = html;
									
									MYPAGE.pageno = MYPAGE.qindex + 1;
									//页面号+1 同步试题页码
									var html1 = template('qitem', ret.data[1]);
									swiper.slides[swiperNextIndex()].innerHTML = html1;
									swiper.lockSwipeToPrev();
								} else {
									api.toast({
										msg: err.msg
									});
								}
							});
						}
						APP.openDb(func);
					} else {
						var sql = MYPAGE.parentSql + ' limit ' + (MYPAGE.qindex - 2) + ',3';
//						alert(sql);
						var func = function(db) {
							db.selectSql({
								name: 'data',
								sql: sql
							}, function(ret, err) {
								if (ret.status) {
									MYPAGE.pageno = MYPAGE.qindex;
									var html = template('qitem', ret.data[1]);
									swiper.slides[cindex].innerHTML = html;
									MYPAGE.pageno = MYPAGE.qindex+1;
									MYPAGE.pageno = MYPAGE.qindex - 1;
									var html1 = template('qitem', ret.data[0]);
									MYPAGE.pageno = MYPAGE.qindex + 1;
									var html2 = template('qitem', ret.data[2]);
									swiper.slides[cindex-1].innerHTML = html1;
									swiper.slides[cindex+1].innerHTML = html2;
//									if(swiper.previousIndex<swiperNextIndex()){
//										swiper.slides[swiper.activeIndex].innerHTML = html1;
//										swiper.slides[swiperNextIndex()].innerHTML = html2;
//									}else if(swiper.previousIndex>swiperNextIndex()){
//										swiper.slides[swiper.activeIndex].innerHTML = html2;
//										swiper.slides[swiperNextIndex()].innerHTML = html1;
//									}
////									alert(JSON.stringify(ret.data));
//									alert(swiper.previousIndex);
//									
//									
//									
//									var html1 = template('qitem', ret.data[1]);
//									swiper.slides[swiper.activeIndex].innerHTML = html;
//									
////									alert(JSON.stringify(ret.data[2]));
//									MYPAGE.pageno = MYPAGE.qindex + 2;
//									var html1 = template('qitem', ret.data[2]);
////									alert(swiperNextIndex());
//									swiper.slides[swiperNextIndex()].innerHTML = html;
									swiper.unlockSwipeToPrev();
								} else {
									api.toast({
										msg: err.msg
									});
								}
							});
						};
						APP.openDb(func);
					}
				}
			});
		}
		apiready = function() {
			var func = function(db) {
				var target = "course-1";
				var sql = 'SELECT COUNT(*) as total FROM question where `target` = \'' + target + '\'';
				MYPAGE.parentSql = 'SELECT * FROM question where `target` = \'' + target + '\' order by id asc';
				db.selectSql({
					name: 'data',
					sql: sql
				}, function(ret, err) {
					if (ret.status) {
						//						alert(JSON.stringify(ret.data));
						//						var data = JSON.parse(ret.data);
						MYPAGE.questionNum = parseInt(ret.data[0].total);
						//						alert(MYPAGE.questionNum);
						renderQuestion();
					} else {
						api.toast({
							msg: err.msg
						});
					}
				});
			}
			APP.openDb(func);
		}
	</script>

</html>